<template>
   <div class="logistics-info" v-if="isIf">
      <h2>物流相关信息</h2>
      <div class="logistics-info-header">
        <div class="logistics-info-header-left">
          <div class="logistics-status blue" v-status="logisticsStatus">未发货</div>
          <div class="logistics-company">{{logisticsCompany}}</div>
          <div class="logistics-no">{{logisticsNo}}</div>
        </div>
      </div>
      <ul class="logistics-info-list" v-show="isShow">
        <li v-for="(item,index) in logisticsInfo" :key="index">
          <div class="logistics-info-list-time">{{item.time}}</div>
          <div class="logistics-info-list-content">{{item.content}}</div>
        </li>
      </ul>
      <button v-info="checkIdentity">查看物流详情</button>
    </div>
</template>

<script>
export default {
  data(){
    return{
      isShow:false
    }
  },
    props:{
      logisticsInfo:{
        type:Array
      },
      logisticsStatus:Number,
      logisticsCompany:String,
      logisticsNo:String,
      role:String,
      isIf:Boolean
    },
    methods:{
      checkIdentity(){
        if( this.role ==='admin' || this.role ==='zhangsan' || this.role ==='lisi'){
              this.isShow = true;
            } else {
              alert('你没有访问权限！')
            }
      }
    },
    directives:{
      info:{
        inserted(ele,fn){
          ele.addEventListener("click",()=>{
            fn.value()
          })
        }
      },
      status(ele,num){
        if(num.value === 0){
          ele.innerHTML = '未发货'
          ele.style.color = 'red'
        } else if (num.value === 1){
          ele.innerHTML = '已发货'
          ele.style.color = 'blue'
        } else {
          ele.innerHTML = '已签收'
          ele.style.color = 'green'
        }
      }
    }
}
</script>

<style>

</style>